<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>learn-websocket</title>
</head>

<body>
  <input type="text" id="ipt">
  <button id="connect-btn">连接</button>
  <button id="send-btn" disabled>发送消息</button>
  <button id="close-btn">断开连接</button>

  <p>
    <span>client message: </span>
    <span id="text" style="color: #f00;"></span>
  </p>
  <script type="module">
    import WebSocketOperator from "./dist/WebSocketOperator.js";
    // 打印日志
    WebSocketOperator.isDebug = true;

    const connectBtn = document.getElementById("connect-btn");
    const sendBtn = document.getElementById("send-btn");
    const closeBtn = document.getElementById("close-btn");
    const ipt = document.getElementById("ipt");
    const span = document.getElementById("text");


    connectBtn.addEventListener("click", () => {
      connectBtn.disabled = true;
      WebSocketOperator.isCompatibleWebSocket().then(res => {
        const wsOperator = new WebSocketOperator({
          url: "ws:192.168.8.131:8888/ws-test",
          heartbeatInterval: 1000,
          heartbeatData: "自定义心跳回应数据",
          reconnectInterval: 1500,
          maxReconnectionNum: -1,
          // maxReconnectionNum: 10,
          isSpeedUp: false,
        });

        setTimeout(() => {
          wsOperator.heartbeatData = "我变了";

          // 错误写法, 不会更新到心跳中
          // wsOperator.option.heartbeatInterval = 3000;

          // 正确写法
          wsOperator.heartbeatInterval = 3000;
        }, 4000);

        wsOperator.onmessage = (params) => {
          console.log("onmessage: ", params);
          span.innerText = params.event.data;
        }
        wsOperator.onopen = (params) => {
          console.log("onopen: ", params);
        }
        wsOperator.onclose = (params) => {
          console.log("onclose: ", params);
        }
        wsOperator.onerror = (params) => {
          console.log("onerror: ", params);
        }

        wsOperator.onheartbeat = (params) => { // 发送心跳
          console.log("onheartbeat: ", params);
        }
        wsOperator.onreconnection = (params) => { // 重新连接
          console.log("onreconnection: ", params);
        }
        wsOperator.onmaxReconnection = (params) => { // 达到最大连接
          console.log("onmaxReconnection: ", params);
        }
        wsOperator.ondestroy = (params) => { // 销毁
          console.log("ondestroy: ", params);
        }


        sendBtn.addEventListener("click", async () => {
          // 给服务器发送消息
          await wsOperator.send(ipt.value);
          ipt.value = "";
          sendBtn.disabled = true;
          setTimeout(() => {
            sendBtn.disabled = false;
          }, 2000);
        });

        closeBtn.addEventListener("click", () => {
          wsOperator.close();
          connectBtn.disabled = false;
          console.log("已取消", wsOperator.ws);
        });
      }).catch(err => {
        if (err) {
          alert(err.message);
        }
      }).finally(err => {
        sendBtn.disabled = false;
      });
    });

  </script>
</body>

</html>